<!--
 * @Author: tenet 18742176629@163.com
 * @Date: 2024-05-22 20:22:04
 * @LastEditors: toString
 * @LastEditTime: 2024-06-27 09:37:15
 * @FilePath: /chain-link-api-front/src/views/rechargeCurrency/index.vue
 * @Description: 充币列表
-->
<template>
  <Header>
    <template #title>{{ t('title.RechargeCurrency') }}</template>
  </Header>

  <!-- 头部搜索框 -->
  <div class="searchBar">
    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item :label="t('table.TxHash2')">
        <el-input v-model.trim="queryParams.TxHash" :placeholder="t('global.PleaseInput') + t('table.TxHash2')"
          clearable />
      </el-form-item>
      
      <el-form-item :label="t('table.ChainName')">
        <el-input v-model.trim="queryParams.chainName" :placeholder="t('global.PleaseInput') + t('table.ChainName')"
          clearable />
      </el-form-item>
        <!-- 开始时间与结束时间 -->
        <el-form-item :label="t('table.Timestamp')">
        <el-date-picker v-model="queryParams.time" type="datetimerange" :start-placeholder="t('recharge.StartTime')"
          :end-placeholder="t('recharge.EndTime')" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY-MM-DD"
          time-format="hh:mm:ss" />
      </el-form-item>
      <el-form-item :label="t('callback.ToAddress')">
        <el-input v-model.trim="queryParams.address" :placeholder="t('global.PleaseInput') + t('callback.ToAddress')"
          clearable />
      </el-form-item>
      <el-form-item :label="t('table.Symbol')">
        <el-input v-model.trim="queryParams.symbolName" :placeholder="t('global.PleaseInput') + t('table.Symbol')"
          clearable />
      </el-form-item>
      <el-form-item class="btns">
        <el-button type="primary" :icon="Search" round @click="onSubmit"> {{ t('button.Search') }}</el-button>
        <el-button type="default" :icon="Refresh" round plain @click="onReset">{{ t('button.Reset') }}</el-button>
      </el-form-item>
    </el-form>
  </div>

  <div class="table">
    <el-table :data="tableData" size="large" style="width: 100%; height: 600px;" border v-loading="loading" :element-loading-text="t('message.LoadingMessage')">
      <el-table-column prop="txHash" :label="t('table.TxHash2')" width="580" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="from" :label="t('recharge.From')" width="390" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="to" :label="t('recharge.To')" width="390" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="value" :label="t('table.Amount')" width="100" align="center"></el-table-column>
      <el-table-column prop="chainName" :label="t('table.ChainName')" width="120" align="center"></el-table-column>
      <el-table-column prop="symbolName" :label="t('table.Symbol')" width="130" align="center"></el-table-column>
      <el-table-column prop="timestamp" :label="t('table.CallBackTime')" width="200" align="center" fixed="right">
        <template #default="scope">
          {{ formatTimestamp(scope.row.timestamp) }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" :label="t('global.Operation')" width="150" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" :disabled="scope.row.status === 1"
            @click="handleCollection(scope)">
            {{ t('global.NotionalPooling') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <div class="page">
    <el-pagination v-model:current-page="pageIndex" :page-size="pageSize" layout="total, prev, pager, next"
      :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script setup>
import { onMounted, ref, unref, reactive } from 'vue'
import { ElMessage, ElPagination } from "element-plus";
import { Search, Refresh } from '@element-plus/icons-vue'
import { formatTimestamp } from '../../utils/timeStamp.js'
import Header from '../layout/header.vue'
import { getUpCoinList, manualCollection } from '../../require/api'
import { useI18n } from "vue-i18n";

const { t } = useI18n();
// 在组件被挂载后执行
onMounted(() => {
  getList()
});

const pageSize = ref(10)
const pageIndex = ref(1)
const total = ref(0)
const tableData = ref([])
const loading = ref(false)


// 查询参数
const queryParams = reactive([
  {
    TxHash: '',
    address: '',
    time: [],
    chainName: '',
    symbolName: '',
    startTime: '',
    endTime: '',
  }
])

// 获取充币列表
async function getList(TxHash, address, startTime, endTime, chainName, symbolName) {
  try {
    loading.value = true
    const { code, data, msg } = await getUpCoinList({
    pageIndex: pageIndex.value,
    pageSize: unref(pageSize),
    txHash: TxHash,
    address: address,
    startTime: startTime,
    endTime: endTime,
    chainName: chainName,
    symbolName: symbolName
  })
  if (code === 200) {
    tableData.value = data.list
    total.value = data.total
  } else {
    ElMessage.error(msg)
  }
  } catch (error) {
    console.log(error)
  } finally {
    loading.value = false
  }
}

// 搜索方法
const onSubmit = () => {
  // 查询时把 pageIndex 重置为1
  pageIndex.value = 1
  queryParams.startTime = queryParams.time ? queryParams.time[0].getTime() / 1000 : '';
  queryParams.endTime = queryParams.time ? queryParams.time[1].getTime() / 1000 : '';
  getList(queryParams.TxHash, queryParams.address, queryParams.startTime, queryParams.endTime, queryParams.chainName, queryParams.symbolName);
}

// 清除  queryParams
const onClear = () => {
  queryParams.TxHash = ''
  queryParams.address = ''
  queryParams.time = ''
  queryParams.startTime = ''
  queryParams.endTime = ''
  queryParams.chainName = ''
  queryParams.symbolName = ''
}

// 重置方法
const onReset = () => {
  onClear();
  getList();
}

// 手动归集
async function handleCollection(scope) {
  // // 测试归集
  // loading.value = true
  // console.log("handle");
  // // 定时器 三秒后 loading关闭
  // setTimeout(() => {
  //   loading.value = false
  // }, 3000) 

  // 归集
  try {
    loading.value = true
    const { code, msg } = await manualCollection({ txHash: scope.row.txHash })
    if (code === 200) {
      ElMessage.success(t('message.NotionalPoolingSuccess'))
    } else {
      ElMessage.error(msg)
    }
  } catch (error) {
    ElMessage.error(error)
  } finally {
    loading.value = false
    getList()
  }
}



// // 格林尼治转换yyyy-MM-dd HH:mm:ss
// const GMTToStr = (time) => {
//   console.log('time:' + time)
//   let date = new Date(time)
//   let minutes
//   let hours
//   let month
//   let second
//   let relDate
//   if (date.getSeconds() < 10) {
//     second = '0' + date.getSeconds()
//   } else {
//     second = date.getSeconds()
//   }
//   if (date.getMinutes() < 10) {
//     minutes = '0' + date.getMinutes()
//   } else {
//     minutes = date.getMinutes()
//   }
//   if (date.getHours() < 10) {
//     hours = '0' + date.getHours()
//   } else {
//     hours = date.getHours()
//   }
//   if (date.getMonth() < 10) {
//     month = '0' + (date.getMonth() + 1)
//   } else {
//     month = date.getMonth() + 1
//   }
//   if (date.getDate() < 10) {
//     relDate = '0' + date.getDate()
//   } else {
//     relDate = date.getDate()
//   }
//   let Str = date.getFullYear() + '-' +
//     month + '-' +
//     relDate + ' ' +
//     hours + ':' +
//     minutes + ':' +
//     second
//   return Str;
//   //返回的就是yyyy-MM-dd HH:mm:ss格式，上面time就是你传入的林尼治标准时间
// }


// 分页
function handleSizeChange(val) {
  pageSize.value = val
  getList()
}

// 分页
function handleCurrentChange(val) {
  pageIndex.value = val
  getList(queryParams.TxHash, queryParams.address, queryParams.startTime, queryParams.endTime, queryParams.chainName, queryParams.symbolName)
}
</script>

<style scoped lang="less">
// 查询样式
.searchBar {
  :deep(.el-form-item) {
    width: 450px !important;
    margin-right: 20px;
    margin-bottom: 0;
  }
}
</style>